<template>
  <a-drawer
    :title="title"
    placement="right"
    maskClosable
    :zIndex="3"
    class="drawer"
    :width="file ? '60%' : '90%'"
    :visible="visible"
    :after-visible-change="afterVisibleChange"
    @close="onClose"

  >
    <markdown-preview v-if="file" :initialValue="initialValue" />
    <iframe width="100%" height="100%" v-if="src" :src="src" />
  </a-drawer>
</template>

<script>
import axios from 'axios'
import { MarkdownPreview } from 'vue-meditor'
export default {
  name: 'BabelParse',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    file: {
      type: String,
    },
    title: {
      type: String,
    },
    src: {
      type: String,
    }
  },
  components: {
    MarkdownPreview
  },
  data() {
    return {
      initialValue: '',
    }
  },
  watch: {
    visible(val) {
      if (val) {
        console.log(this.file);
        axios.get(this.file).then(res => {
          this.initialValue = res.data
        })
      }
    }
  },
  created() {
    // axios.get(this.file).then(res => {
    //   this.initialValue = res.data
    // })
  },
  methods: {
    afterVisibleChange() {
      // this.$emit('close')
    },
    onClose() {
      this.$emit('close')
    },
  }
};
</script>

<style scoped>
.drawer .ant-drawer-body{
  min-height: 100%;
}
</style>
